<template>
  <!-- 领奖地址界面 -->
  <view class="content">
    
    <view class="content-header">
      <!-- <image src="goods.prizeAvatar" mode=""></image> -->
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
    </view>
    
    <view class="font-box">
      <view style="margin-bottom: 20rpx; font-size: 28rpx; color: #000000;font-weight: 600;">收件地址:</view>
      <u--textarea height="150" v-model="value" placeholder="请输入地址" count></u--textarea> 
     <view style="display: flex;justify-content: center; padding: 0 25%; margin-top: 30rpx;"><u-button type="primary" shape="circle" @click="submit" text="确定"></u-button></view>
    </view>
    <u-modal :show="show" :showCancelButton="true" :title="thisTitle" @confirm="confirm" @cancel="cancel" width="250px"></u-modal>
  </view>
</template>

<script>
export default {   data() {
    return {
      show: false,
      thisTitle: '确定地址?',
      value: '',
      id: null,

      postData: {
        mailAddress: '',
        openId: uni.getStorageSync('openid'),
        prizeId: null,
        type: 2
      }
    };
  },
  onLoad(options) {
    console.log(options.goodsId);
    this.id = options.goodsId;
  },
  methods: {
    submit() {
      this.show = true;
      console.log(this.value);
    },
    async confirm() {
      this.show = false;
      this.postData.mailAddress = this.value;
      this.postData.prizeId = this.id;
      if (this.postData.mailAddress === '') {
        return uni.showToast({
          title: '请填写地址！',
          icon: 'error'
        });
      } else {
        const { data } = await uni.$http.post('/prize/addMailAddress', this.postData);
        if (data.statusCode !== 200) {
           uni.showToast({ 
           title: data.message, 
           icon: 'error' 
         });
        } else {
          uni.showToast({
            title: data.message,
            icon: 'success'
          });
          this.value = '';
          setTimeout(() => {
            uni.switchTab({
              url: '../../pages/mine/mine'
            });
          }, 1000);
        }
      }
    },
    cancel() {
      this.show = false;
    }
  }
};
</script>

<style lang="scss">
.content {
  position: relative;
  background-color: #f7f7f7;
  width: 100%;
  height: 100%;
  
  .content-header {
    height: 500rpx;
    background-color: #f7f7f7;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .font-box {
    position: absolute;
    top: 100rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    .u-textarea.data-v-81cd9d32 {
      border: 2rpx solid #808080;
    }
  }
}
</style>
